Iconos curiosos y graciosos.

Double Trouble

Grassy Icon Design

Hace unos días para responder a una pregunta estuve probando la forma de añadir un marco a todas las imágenes de los post. El marco es una imagen más o menos como el ejemplo que ilustra la entrada y lógicamente como se trata de una imagen es necesario que todas las imágenes de los post tenga la misma medida a no ser que en alguna ocasión prescindamos de ese marco utilizando html.

La idea, lo que se tenía muy claro era no tener que utilizar ningún código cada vez, ni tan siquiera añadiéndolo a la plantilla de entrada, la idea era subir la imagen en un post y que automáticamente se visualizara con el marco.

Y claro, una a veces piensa,  incluso piensa detenidamente como si en lugar de pensar estuviéramos descubriendo la rueda. Luego de pensar y probar hice lo de otras veces consultar  esferas superiores es decir Vagabundia porque allí además de pensar siempre dan buenos remedios como en este caso .

 Para empezar estaría bien saber que la parte que añade estilos a los bordes en las imágenes de los post viene representada en la plantilla más o menos así:

.post img, table.tr-caption-container {

padding:4px;

border:1px solid $bordercolor;

}

.tr-caption-container img {

border: none;

padding: 0;

}

 De todo eso se podría prescindir ya que con lo siguiente sería suficiente

.post-body img {

padding:4px;

border:1px solid $bordercolor;

}

Con lo anterior ya podemos añadir estilos a los bordes, y no sólo es suficiente sino que de esa forma el borde sólo se añade a las imágenes subidas a los pots, lógicamente en post.body img tendríamos que añadir nuestros estilos de borde pero no en este caso que le vamos a añadir una imagen.

En este caso dejamos esa parte así:

.post-body img {

padding:0;

}

Antes de seguir guardamos los cambios y nos situamos en el editor de entradas, subimos una imagen y en html nos da un código así:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjbNtz_O1qRwq79KqpC5d-mRKSgKB-_kbq9UjuZcrW-Mh7xDLiuD93kRLL8C9oarlu7MoLVETOLjTiirbC5g7xjyOazmvYe12mnmFnzKDhkLKARhrMNY4Dhb3_f4u0ngqg5kQ5/s320/27-6-2011+1.6.43+1.jpg" imageanchor="1" style=""><img border="0" height="300" width="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjbNtz_O1qRwq79KqpC5d-mRKSgKB-_kbq9UjuZcrW-Mh7xDLiuD93kRLL8C9oarlu7MoLVETOLjTiirbC5g7xjyOazmvYe12mnmFnzKDhkLKARhrMNY4Dhb3_f4u0ngqg5kQ5/s400/27-6-2011+1.6.43+1.jpg" /></a></div>

Si nos fijamos Blogger añade una clase "class="separator" aprovechamos esa clase y en la plantilla añadimos justo antes de ]]></b:skin>

.separator {

height: 300px;

margin: 0 auto !important;

position: relative;

width: 400px;

}

.separator:after {

content: url("url-imagen-del-marco-400x300");

left: 0;

position: absolute;

top: 0;

}

Para el ejemplo he creado unos marcos de 400px ancho x 300px alto, esa es la medida que añadimos en los estilos de separator. Si deseamos mostrar nuestras imágenes de distinto tamaño cuidaremos que también ese tamaño coincida con la anchura y altura en los estilos.

Si el marco fuera una imagen desigual es posible que tengamos que hacer ajustes hasta ubicar la imagen en el centro del marco.

En la entrada no tenemos que añadir nada, simplemente subimos la imagen y ajustamos la medida indicada en Edición de HTML y listo.
<imgborder="0"height="300"width="400"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjbNtz_O1qRwq79KqpC5d-mRKSgKB-_kbq9UjuZcrW-Mh7xDLiuD93kRLL8C9oarlu7MoLVETOLjTiirbC5g7xjyOazmvYe12mnmFnzKDhkLKARhrMNY4Dhb3_f4u0ngqg5kQ5/s400/27-6-2011+1.6.43+1.jpg" />

¿Ven estas flores? pues eran así eran antes de jugar con ellas y con iPiccy para descubrir las posibilidades que nos da este editor online. Además de recortar, ajustar color y tamaño como hacen todos los editores nos proporciona 30 filtros para añadir efectos artísticos.

Podemos guardar nuestras obras de arte en formato JPG, PNG, BMP o TIFF.

Visto en:CheckApps

Muchas texturas, todas con algo en común lunares, lunares y lunares.

Descarga en:
  Naldz Graphics   y  Deviantart

Me enteré ayer porque un conocido se puso en contacto conmigo para comunicármelo.

¿Sabes? Mayte de El horno de María nos ha dejado.

Inmediatamente me vinieron a la mente imágenes de una noche fantástica, la única vez que vi a Mayte en persona, la noche de los premios 20Minutos.

No podía creerlo, costaba creerlo, por eso fui a su blog y por los comentarios de la última entrada estaba claro que no se trataba de un error.

Esto de conocerse virtualmente no nos inmuniza a cualquier dolor, no hay escudo que frene cualquier sentimiento ni que forme una barrera protectora. 

Ahora quiero y ahora no, me preocupo solo un poco  o mejor no me preocupo nada... 

Eso, sería lo ideal escoger los sentimientos, la cantidad y ... ¿por qué no el momento? 

Pero no, nada de eso puede ser. Nada, si eres un ser humano con un mínimo de sensibilidad.

Pasamos de la alegría a la tristeza, mil preguntas sin respuesta, rabia, desconcierto,  una estela interminable con su nombre y su recuerdo que permanecerá siempre.

Descansa en paz Mayte.

Maravillosa Galería  de texturas ofrecida por Lost & Taken 

Son gratuitas tanto para uso personal como profesional, las del ejemplo son una muestra de la gran variedad que encontraremos.

Me hizo mucha gracia este vídeo porque me recordó a Graciela en esas salidas virtuales por el parque en las que como condición hay que probar las manzanas caramelizadas, pero eso era porque no había visto estas nubes gigantes uffff ya imagino el sabor.

REFERENCIA Y DESCARGA:Desktop Nexus

• Inicio
• Perfil
• Contacto
• Blogger
• RSS

A Fero le gusta el menú de Everything is a Remix un menú sencillo según sus palabras, y nos pregunta si hay forma de tener uno igual. Para añadirlo editamos un nuevo gadget de HTML y en su interior añadimos:

<div id="mainNav">
<ul>
<li class="page_item page-item-30 current_page_item"><a href="#" title="Inicio">Inicio</a></li>
<li class="page_item page-item"><a href="#" title="Perfil">Perfil</a></li>
<li class="page_item page-item-12"><a href="#" title="Contacto">Contacto</a></li>
<li class="page_item page-item-11"><a href="#" title="Blogger">Blogger</a></li>
<li><a href="#">RSS</a></li>
</ul>
</div>

Y antes de ]]></b:skin>  añadimos los estilos:

#mainNav{
margin-top: 10px;
padding: 5px;
background: #FBFBFB;
border-top: 1px solid #EAEAEA;
border-bottom: 1px solid #EAEAEA;
}
#mainNav ul{
margin: 0 auto;
width: 60em;
text-align: left
}
#mainNav li{
display: inline;
margin-right: 20px;
font-size: 1.5em;
text-transform: uppercase;
}
#mainNav li:last-child{
margin-right: 0;
}
#mainNav a:link,
#mainNav a:visited{
color: #999;
white-space: nowrap;
}
#mainNav a:hover,
#mainNav a:active{
text-decoration: underline;
color: #2E301C;
}
#mainNav .current_page_parent a:link,
#mainNav .current_page_parent a:visited,
#mainNav .current_page_item a:link,
#mainNav .current_page_item a:visited{
font-weight: bold;
color: #2A2D1A;
}
#mainNav .current_page_parent a:hover,
#mainNav .current_page_parent a:active,
#mainNav .current_page_item a:hover,
#mainNav .current_page_item a:active{
color: #2E301C;
}

Para configurar un menú esta entrada puede ser de utilidad.

Descarga: Jive 10 social media

Descarga: Social Media Bubblicons

Visto en:Caligraffiti

Esta semana que termina ha sido un tanto novedosa debido al nuevo juguete de Blogger.

El gadget para favicon sorprendió a propios y extraños ¿añadir el favicon con un simple click? increíble.

Lo probé como 8 ó 9 veces siempre me lo aceptaba pero seguía viendo el favicon de Blogger, actualizaba la página, intentaba con otro favicon, cerraba el navegador y abría de nuevo. Nada, mi favicon con el nuevo sistema no aparecía pero claro, si solo era accesible por Blogger Draft... eso estaba en fase de pruebas y a lo mejor estaban experimentando.

Durante el resto del día fueron varios los que me hicieron llegar la novedad, unos decían que les funcionaba bien y otros que no !!Ese es mi chico!! ¡¡Ese es mi Blogger!! si funcionara a la primera ¿Dónde estaría la gracia eh?? ¿Dónde?

En Blogger in Draft como es lógico mencionaban el gadget del favicon pero la suerte que tienen estos chicos es increíble porque a ellos siempre les funciona todo perfectamente y como les funciona pues piensan que para todo el mundo es igual de ahí que los 123 comentarios de esa entrada la mayoría es para decir que no consiguen ver el favicon.

El caso que seguí probando y como no, también preguntando. Por fin JMiur da una posibilidad y no crean que lo pensó dos veces antes de explicarlo en ¿Me ves o no me ves? porque según él estaba muy claro. Buen título por cierto porque eso era precisamente lo que estaba ocurriendo limpié la caché limpita, limpita y fue al otro día cuando por fin pude ver el favicon.

No desesperen que hay favicons muy, pero que muy remolones.

Lo del favicon fue sólo un aperitivo comparado con lo que encontraron otros, la nueva interfaz y la imposibilidad de añadir plantillas nuevas como era el caso de Henry que pudo solucionar ayudándose de forma intuitiva y haciendo uso de una copia de respaldo.

Sobre la nueva interfaz poco puedo decir porque sólo la he visto en capturas.

Algunas de las cosas que he leído me alarmaron porque parece ser que no se aprecia la opción de editar HTML, para ese problema  se puede intentar a desmarcar donde se establece blogger en borrador como predeterminado. Pero no es algo comprobado  porque como digo en mi blog de nueva interfaz nada de nada..

Los que ya la están disfrutando y quieren aclarar sus dudas quizás el siguiente enlace de ayuda Blogger pueda orientar,  allí se encuentra friendly colaborador principal y una de sus respuestas a esa carencia de la funcionalidad de editar HTML responde lo siguiente:

"En efecto, hasta ahora no está disponible la funcionalidad "Editar HTML", el código de la plantilla, y tampoco están disponibles las plantillas llamadas de "Diseño" o del 2006, incluso cuando ya muchos lo han reportado como un supuesto bug (improbable a esta altura).
Quedan disponibles las plantillas del 2010, las "clásicas" y el "Diseñador de plantillas", con sus muchísimas limitaciones. La opción de editar las plantillas en algún editor -aplicación de terceros- es una alternativa sólo para muy pocos, la de usar Google Web Toolkit, también (para quienes quieren una app de Google, me refiero). Esperemos que el equipo de Blogger cambie su posición, un aspecto más cool en detrimento de las mejores funcionalidades no me parece una ganancia para los usuarios."

No suelo dar consejos pero esta vez lo voy a dar "Hagan copia de sus plantillas o descarguen el archivo XML" con los cambios podemos cometer algún error y necesitar instalar de nuevo la plantilla, si nos dejan.

No son muchos, en concreto 36 pero los suficientes para conseguir fondos elegantes y de alta calidad, son de libre uso y podemos encontrarlos en Subtle Patterns 

A la derecha de cada fondo encontraremos el botón de vista previa, y nos mostrará el efecto aplicado a la página.

Esto que vemos no es más que un pasatiempo de esos que surgen a raíz de algo que vemos y decidimos probar, el resultado es una pequeña galería que podemos añadir al footer o alguna página estática.

No hay límite de imágenes y aunque en el ejemplo el borde es de color gris en cualquier blog las imágenes se mostrarán con el borde que tengamos definido para las imágenes de los post, si no tuviéramos borde entonces se mostraría tal y como vemos en el ejemplo.

Los estilos los añadiremos justo antes de ]]></b:skin>

#galeria ul {
 overflow: hidden;
 padding-top: 5px;
}
#galeria ul li {
 display: inline;
}
#galeria ul li a {
 display: block;
 float: left;
 width: 200px;
 margin: 0 10px 20px;
}
#galeria ul li a img {
 display: block;
 width: 200px;
 height: 125px;
 margin: -5px 0 0 -5px;
 border: 5px solid rgb(250, 250, 250);
}
#galeria ul li a:hover img, #galeria ul li a:focus img {
 border-color: rgb(235, 235, 235);
}
#galeria ul li a:active img {
 margin: -4px 0 -1px -5px;
}
#galeria ul li a span {
 width: 195px;
 position:relative;
 height: 20px;
 display: block;
 color: rgb(242, 242, 242);
 font-size: 15px;
 line-height: 18px;
 letter-spacing: 0px;
 word-spacing: 3px;
 text-transform: uppercase;
 padding: 2px;
 background-color: #191919;
 margin-top: -30px;
 text-indent: 4px;
 /*+opacity:70%;*/
 filter: alpha(opacity=70);
 -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
 -moz-opacity: 0.7;
 opacity: 0.7;
}
#galeria ul li.newfaces-icon a span {
 display: none;
}
#galeria ul li a:hover span, #galeria ul li a:focus span {
 color: rgb(205, 72, 72);
}

Y el HTML allí donde deseamos mostrarlo.

<section id="galeria">
<ul>
<li>
<a title=""href="URL-ENLACE"><img alt="foto" src="URL-IMAGEN"/><span>Título</span></a>
</li>
<li>
<a title=""href="URL-ENLACE"><img alt="foto" src="URL-IMAGEN"/><span>Título</span></a>
</li>
<li>
<a title=""href="URL-ENLACE"><img alt="foto" src="URL-IMAGEN"/><span>Título</span></a>
</li>
<li>
<a title=""href="URL-ENLACE"><img alt="foto" src="URL-IMAGEN"/><span>Título</span></a>
</li>
<li>
<a title=""href="URL-ENLACE"><img alt="foto" src="URL-IMAGEN"/><span>Título</span></a>
</li>
<li>
<a title=""href="URL-ENLACE"><img alt="foto" src="URL-IMAGEN"/><span>Título</span></a>
</li>
</ul>
</section>

Donde URL-IMAGEN lo sustituimos por la url de nuestra imagen a mostrar, en Título añadimos el texto y en URL-ENLACE es el espacio para añadir la url del sitio si deseamos que la imagen sea un enlace.

Las imágenes miden 200 x 150 las del ejemplo son gentileza de Wallpapers a full

Referencia y Descarga: creativeNERDS

La mayoría no resistimos la tentación de probar aplicaciones online, las más atrayentes son las que nos permiten retocar fotografías y añadir distintos efectos como Pixlr-o-matic.

El manejo es muy sencillo y los efectos son muy atractivos y elegantes, sólo hay que subir la imagen desde nuestro PC o sacarnos la foto con la webcam,  y guiarnos del reloj que hay en la parte inferior de la página.
Los efectos se mostrarán según el lugar que marque la aguja y pueden ser los siguientes:

- Zona roja filtros de tonalidades y colores.
- Zona azul texturas.
- Zona amarilla marcos.

Todos estos efectos también los tenemos disponibles en una aplicación para Facebook.

Visto en arturogoga

No sé si recordarán aquella entrada que trataba sobre la forma de invitar a los visitantes a cambiar el color de fondo de blog. Al mismo código le añadimos también una imagen tipo textura de forma que también podíamos cambiar la imagen de fondo.

Lo de hoy es algo muy parecido y responde a una consulta que llegó a mi bandeja de correo, se trata de conservar la imagen de fondo y que esta cambie de color.

Como la imagen tiene el fondo transparente facilita las cosas y aplicado a nuestro blog el bloque de colores quedaría en la sidebar pero el efecto sería en el body (fondo del blog)

Y el código para añadir en un gadget de HTML es el siguiente:

<table border="0" align="center" width="22%" "="" style="cursor:url('http://1.bp.blogspot.com/_q4j3j-ja2ro/sjk-wmzqhji/aaaaaaaalhm/lpvqdwrqyje/s200/icono_lupa.gif'), auto;"><tbody>
<tr> <td><span onmouseover="javascript:document.body.style.backgroundColor='#c96d77'; document.body.style.backgroundImage='url(URL-IMAGEN-DE-FONDO-PNG)';"><img border="1" src="http://4.bp.blogspot.com/-qVNaia9XWjE/TeV2vlHf4SI/AAAAAAAARNk/d_VUCzKwNV4/s1600/rosa-palopng.png" /></span></td> <td><span onmouseover="javascript:document.body.style.backgroundColor='#3f6dd9'; document.body.style.backgroundImage='url(URL-IMAGEN-DE-FONDO-PNG)';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1iCQAlPPtbkqXxd4Jbtazdkzy7yOBDM7liTc_1tbJ49gV_xzTD1Qou5nRQJZaq_Op4pWH4KCVke5xRfWEMjRGCbvrAqTMU2qnJfunY65I1NlCdYM1FioGNBKJBLkcp4c7Mteb0Q/s320/blfondoazul.png" /></span></td> <td><span onmouseover="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='url(URL-IMAGEN-DE-FONDO-PNG)';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWS6DLn_NN63ybZKRwEpvmAJU4qIoQ6KaHjG4wPoojmBiwvWVeEmdqsKZkyc6KOfYWBKLGIC5MbG6SIFVlIY5lZENNRrYNGNedXVR3FW2NBYt4QBk3-Y6Oi9DjGZcGZKPvtM8Liw/s320/blfondonegro.png" /></span></td> <td><span onmouseover="javascript:document.body.style.backgroundColor='#98ffff'; document.body.style.backgroundImage='url(URL-IMAGEN-DE-FONDO-PNG)';"><img border="1" src="http://1.bp.blogspot.com/-_l6ow5hGsYk/TeVyPrYYHdI/AAAAAAAARNY/v5YgBZsTBJA/s1600/turquesa.png" /></span></td> <td><span onmouseover="javascript:document.body.style.backgroundColor='#FF962D'; document.body.style.backgroundImage='url(URL-IMAGEN-DE-FONDO-PNG)';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzcf1WxWmcfw6dwqz65KYF3nCH5IuvB1fjQd2gtvNfnyxNnYuJCJBxQwi6ZT0qYMThjDsWCnB0zihxZFjvUn3UdURBghDd5NLvjPbi6gsgal0m9Ml3Gx86mXm7T74BzxX25uamvA/s320/blfondonaranja.png" /></span></td> </tr>
<tr> <td><span onmouseover="javascript:document.body.style.backgroundColor='#90d0a0'; document.body.style.backgroundImage='url(URL-IMAGEN-DE-FONDO-PNG)';"><img border="1" src="http://3.bp.blogspot.com/-FJtDqiGBsRE/TeVz2GAG3mI/AAAAAAAARNg/0Mty5cqg3bc/s1600/verde.png" /></span></td> <td><span onmouseover="javascript:document.body.style.backgroundColor='#ED1C24'; document.body.style.backgroundImage='url(URL-IMAGEN-DE-FONDO-PNG)';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT3ewyjeG6_eUxpb-Nt69G1cfly7kjn04wb3HfKV8Qq8vA0D0mQjGKzJCTUXajE-0ncn4MqAp5HzN2w-ptZz4U49UyjZEfK2_p_hNTmU7kVB7SmTDaEfv56jbTLV61yMIrTzrDyA/s320/blfondorojo.png" /></span></td> <td><span onmouseover="javascript:document.body.style.backgroundColor='#ffffff'; document.body.style.backgroundImage='url(URL-IMAGEN-DE-FONDO-PNG)';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqSXLJLR5X-Q6XeyDSd1-ExPqF7aNYnU2GIDZf2-27IMY51YU1ur4lUd04ShMuCBvkd_VlQYge9wyCN9ISse2ftfwbZ18KKNQCEBXhpuPOxNThf-vsqk1MLNfBJAtQ75QKI-qpsQ/s400/blfondoblanco.png" /></span></td> <td><span onmouseover="javascript:document.body.style.backgroundColor='#FFCCCC'; document.body.style.backgroundImage='url(URL-IMAGEN-DE-FONDO-PNG)';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGSykcOCGNDOBELVzcIzqCqks1fGFnhPlK_TC1y6zftBnPTNb8tP9mOkknZ5cw0yjNmyqkAGCxzx1JlH8cKJgqb2LBRZ6aBNUkr8kRJSGgby7dBIJnsQjQAzm2ntoG8CmvPC1A4g/s320/blfondorosa.png" /></span></td> <td><span onmouseover="javascript:document.body.style.backgroundColor='#ccb0e1'; document.body.style.backgroundImage='url(URL-IMAGEN-DE-FONDO-PNG)';"><img border="1" src="http://2.bp.blogspot.com/-qlyIkpS_8I8/TeVy7ilWDII/AAAAAAAARNc/IUveCL-rWvE/s1600/lila.png" /></span></td> </tr>
</tbody></table>

Añadiremos nuestra imagen de fondo en URL-IMAGEN-DE-FONDO-PNG